<template>
  <div>
    <el-table :data="tableData5" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="项目ID">
              <span>{{ props.row.project.projectId }}</span>
            </el-form-item>
            <el-form-item label="项目名字">
              <span>{{ props.row.project.projectName }}</span>
            </el-form-item>

            <el-form-item label="项目类型">
              <span>{{ props.row.project.projectType }}</span>
            </el-form-item>

            <el-form-item label="项目种类">
              <span>{{ props.row.project.projectMajor }}</span>
            </el-form-item>
            <el-form-item label="项目地点">
              <span>{{ props.row.project.projectPlace }}</span>
            </el-form-item>
            <el-form-item label="项目花费">
              <span>{{ props.row.project.projectCost }}元</span>
            </el-form-item>
            <el-form-item label="工人名字">
              <span>{{ props.row.workerName }} ( 星级： {{props.row.workerStar}} )</span>
            </el-form-item>
            <el-form-item label="项目回复">
              <span>{{ props.row.object.dispatchMsg }}</span>
            </el-form-item>

            <el-form-item
              label="满意程度"
              prop="object.dispatchSatLevel"
              :rules="[{required: true, message: '请输入项目名称', trigger: 'change'}]"
            >
              <el-rate
                :disabled="!props.row.iscallback"
                show-score
                v-model="props.row.object.dispatchSatLevel"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              ></el-rate>
            </el-form-item>

            <el-form-item label="项目内容">
              <span>{{ props.row.project.projectNote }}</span>
            </el-form-item>
            <el-form-item label="管理员评价">
              <el-input
                type="textarea"
                :disabled="!props.row.iscallback"
                v-model="props.row.object.dispatchAssess"
                placeholder="请输入评价信息"
              ></el-input>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="项目时间">
        <template slot-scope="scope">{{scope.row.project.projectDate|YMDHMSdate}}</template>
      </el-table-column>
      <el-table-column label="项目名字" prop="project.projectName"></el-table-column>
      <el-table-column label="项目种类" prop="project.projectMajor"></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <span v-if="scope.row.iscallback==false&&scope.row.issubmit==false">
            <el-button
              type="primary"
              disabled=""
              @click="submitForm(scope.row)"
            >任务未完成</el-button>
          </span>

          <span v-if="scope.row.iscallback==true&&scope.row.issubmit==false">
            <el-button
              type="primary"
              
              @click="submitForm(scope.row)"
            >确认提交</el-button>
          </span>

          <span v-if="scope.row.iscallback==true&&scope.row.issubmit==true">
            <el-button
              type="primary"
              disabled=""
              @click="submitForm(scope.row)"
            >任务已完成</el-button>
          </span>

          

          <el-button type="primary" style="margin-left: 10px;" :disabled="scope.row.object.dispatchMsg!=null" @click="todelete(scope.row)">删除</el-button>

          <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span>确认删除报修项目吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteById(pro_id)">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 0 auto; 
    width:550px;
    border-width:5px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[1 , 10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pro_id: "",
      centerDialogVisible: false,
      tableData5: [
        // {
        //   msgId: "JH202004021859365",
        //   msgLevel: "1",
        //   msgName: "防疫通知",
        //   msgMain: "做好小区防疫措施",
        //   msgMsg:
        //     "针对传染病采取的预防、控制或消灭的对策和措施称为防疫措施。预防、控制和消灭传染病应讲究战略、战术。制订防疫措施时应遵循下列原则；(1)在各级党和政府领导下做好组织工作，这是防疫工作顺利进行的重要组织保证。(2)贯彻预防为主的方针。(3)充分发动群众、做好防疫工作。(4)讲究对策，采取综合性措施，并选择主导措施。(5)做好计划免疫和疾病监测工作。(6)坚持反复斗争的战略观点。",
        //   msgBeginDate: "2020/4/2"
        // }
      ],
      page: {
        size: 10,
        current: 1,
        total: 5
      }
    };
  },

  methods: {
    todelete(index) {
      this.centerDialogVisible = true;
      this.pro_id = index;
      console.log(index);
    },
    deleteById(row) {
      //进行删除操作，delete方法
      this.centerDialogVisible = false;
      this.axios
        .post("project/deleteprojectplus", row)
        .then(res => {
          console.log(res);
          if (res.data == "success") {
            this.$message({
              message: "已成功删除！！！",
              type: "warning"
            });
            window.location.reload();
          }
        })
        .catch(err => {
          console.error(err);
        });
      console.log(row);
    },
    submitForm(formName) {
      console.log(formName);
      this.axios
        .post("project/updateprojectplus", formName)
        .then(res => {
          if (res.data == "success") window.location.reload();
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
    },
    //分页
    handleSizeChange(val) {
      //分页的标记数，一页有多少数据。
      this.page.size = val;
      this.axios
        .post("project/showdispatch", this.page)
        .then(res => {
          this.page.total = res.data.pageSet.total;
          this.page.size = res.data.pageSet.size;
          this.page.current = res.data.pageSet.current;
          this.tableData5 = res.data.projectPlusList;
        })
        .catch(err => {
          console.error(err);
        });

      console.log(`每页 ${val} 条`);
      console.log(val);
    },
    handleCurrentChange(val) {
      //当前是第几页
      this.page.current = val;
      this.axios
        .post("project/showdispatch", this.page)
        .then(res => {
          this.page.total = res.data.pageSet.total;
          this.page.size = res.data.pageSet.size;
          this.page.current = res.data.pageSet.current;
          this.tableData5 = res.data.projectPlusList;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(`当前页: ${val}`);
      console.log(val);
    },

    // 选项标记颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.msgLevel === "1") {
        return "warning-row";
      } else {
        return " ";
      }
    }
  },
  created() {
    this.axios
      .post("project/showdispatch", this.page)
      .then(res => {
        this.page.total = res.data.pageSet.total;
        this.page.size = res.data.pageSet.size;
        this.page.current = res.data.pageSet.current;
        this.tableData5 = res.data.projectPlusList;
        // if (
        //   res.data.projectPlusList.object.dispatchMsg == "" ||
        //   res.data.projectPlusList.object.dispatchMsg == null
        // ) {
        //   this.israte = false;
        // }
        console.log(res.data.projectPlusList);
      })
      .catch(err => {
        console.error(err);
      });
  },
  components: {}
};
</script>

<style scope>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.showdiv {
  border: solid 1px #df1111;
}
.rate {
  position: relative;
  height: +200000px;
}
.el-table .warning-row {
  background: oldlace;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  
}
</style>
